<h2 class="homepage-line-title fix">
    <span class="left"></span>
    <span class="center">发现新玩法</span>
    <span class="right"></span>
</h2>
<div class="homepage-line new-line">
    <div class="line-prev"><div class="icon"></div></div>
    <div class="line-next"><div class="icon"></div></div>
    <div class='homepage-line-box'>
         <div class="homepage-line-wrap">
          <ul class="line-list fix">
          <{foreach from=$newlinelist item=v}>
           <li class="li">
           <a class="a" target="_blank" href="/<{$v.type}>/detail/<{$v.id}>">
           <div class="line-wrap">
                                
           <div class="line-top">
             <div class="line-thumb-shadow"></div>
             <img class="line-thumb" src="<{$v.thumb}>">
             <em class="line-name"><{$v.name}></em>
             <em class="line-city"><{$v.city}></em>
             <em class="line-price">
             <{$v.priceTotal/100|round:2}>€
             </em>
           </div>
                                                           
           <div class="line-bottom fix">
             <div class="line-bottom-left">
              <img class="guide-tx" src="<{$v.guider.userIcon}>">
              <em class="guide-name"><{$v.guider.realName}></em>
             </div> 
             <div class="line-bottom-right">
              <{$v.summary}>
             </div>
           </div>
             
           </div>
           </a>
           </li>
          <{/foreach}>
          </ul>
         </div>
     </div>
</div>
                
<h2 class="homepage-line-title fix">
    <span class="left"></span>
    <span class="center">最热门玩法</span>
    <span class="right"></span>
</h2>
<div class="homepage-line pop-line">
    <div class="line-prev"><div class="icon"></div></div>
    <div class="line-next"><div class="icon"></div></div>
    <div class='homepage-line-box'>
         <div class="homepage-line-wrap">
          <ul class="line-list fix">
          <{foreach from=$poplinelist item=v}>
           <li class="li">
           <a class="a" target="_blank" href="/<{$v.type}>/detail/<{$v.id}>">
           <div class="line-wrap">
                                
           <div class="line-top">
             <div class="line-thumb-shadow"></div>
             <img class="line-thumb" src="<{$v.thumb}>">
             <em class="line-name"><{$v.name}></em>
             <em class="line-city"><{$v.city}></em>
             <em class="line-price">
             <{$v.priceTotal/100|round:2}>€
             </em>
           </div>
                                                           
           <div class="line-bottom fix">
             <div class="line-bottom-left">
              <img class="guide-tx" src="<{$v.guider.userIcon}>">
              <em class="guide-name"><{$v.guider.realName}></em>
             </div> 
             <div class="line-bottom-right">
              <{$v.summary}>
             </div>
           </div>
             
           </div>
           </a>
           </li>
          <{/foreach}>
          </ul>
         </div>
     </div>
</div>
<style>
.homepage-line-title{width: 1000px;margin: 30px auto 20px}
.homepage-line-title .left{float: left;width: 410px;margin-top: 19px;border-bottom: 1px solid #dededd;}
.homepage-line-title .center{font-size: 25px;line-height: 36px;float: left;width: 180px;text-align: center;color: #333;}
.homepage-line-title .right{float: left;width: 410px;margin-top: 19px;border-bottom: 1px solid #dededd;}
.homepage-line{position: relative;width: 1000px;height: 312px;margin: 0 auto;}
.homepage-line .line-prev{cursor:pointer;position: absolute;top: 95px;left:-25px;width: 50px; height: 50px;border: 1px solid #ccc;border-radius: 25px;background: #fff;box-shadow: 0 0 0 4px rgba(0,0,0,.1); z-index: 10;}
.homepage-line .line-prev .icon{background: url('/resource/www/imgs/zy-detail-icons.png') -214px 621px;background-size: 300px 615px;width: 40px;height: 40px;border-radius: 20px;z-index: 15;transform: rotate(180deg);margin: 0;padding: 0;}
.homepage-line .line-next .icon{background: url('/resource/www/imgs/zy-detail-icons.png') -206px 630px;background-size: 300px 615px;width: 40px;height: 40px;border-radius: 20px;z-index: 15;margin: 0;padding: 0;}
.homepage-line .line-next{cursor:pointer;position: absolute;top: 95px;right:-25px;width: 50px; height: 50px;border: 1px solid #ccc;border-radius: 25px;background: #fff;box-shadow: 0 0 0 4px rgba(0,0,0,.1); z-index: 10;}
.homepage-line-box{width: 1000px;height:312px;overflow: hidden;}
.homepage-line-wrap{width:3450px;position:relative;top:0;left:0;}
.line-list{padding:0;margin:0;}                 
.line-list a {text-decoration:none; color:#000;}        
.line-list .li{float: left;width: 310px;margin-right: 35px;border: 1px solid #E2E2E2}
.line-list .line-top{position:relative;}
.line-list .line-top .line-thumb-shadow{display:none;position:absolute;top:0;left:0;width: 310px;height: 245px;background:#000;opacity:0.5;}                                        
.line-list .line-top .line-thumb{width: 310px;height: 245px;}
.line-list .line-top .line-name{position: absolute;top: 90px;left: 75px;color: #fff;width: 160px;font-size: 18px;line-height: 22px;display:none;text-align:center;}
.line-list .line-top .line-city{position: absolute;top: 10px;right: 10px;color: #fff;display:none;}
.line-list .line-top .line-price{width: 60px;height:30px;text-align:center;font-size: 18px;line-height: 30px;position: absolute;top: 170px;left: 0;color: #fff;background: #333;} 
.line-list .line-bottom{width: 310px;height: 65px;}
.line-list .line-bottom-left{float: left;width: 54px;height: 65px;margin-left: 10px;}
.line-list .line-bottom-left .guide-tx{width: 50px;border: 2px solid #fff;border-radius: 25px;position: relative;top: -25px;}
.line-list .line-bottom-left .guide-name{position: relative;top: -20px;color: #000;width: 54px;text-align: center;font-size: 12px;display: block;word-break: break-word;}
.line-list .line-bottom-right{float: left;width: 226px;font-size: 12px;line-height: 18px; overflow: hidden;height: 35px;margin: 10px 10px 20px 10px; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical}

</style>

<script type="text/javascript">
$('.line-wrap').mouseenter(function(){
  $(this).find('.line-thumb-shadow').show();
  $(this).find('.line-name').show();
  $(this).find('.line-city').show();
});

$('.line-wrap').mouseleave(function(){
  $(this).find('.line-thumb-shadow').hide();
  $(this).find('.line-name').hide();
  $(this).find('.line-city').hide();
});

$('.homepage-line .line-next').click(function(){
  var box=$(this).parent().find('.homepage-line-wrap');
  var posleft=parseInt(box.css('left'));
  if(posleft>-2400){
     posleft-=345;
     posleft+='px';
  }else{posleft=0;}        
  box.animate({left:posleft},'normal','swing');
});

$('.homepage-line .line-prev').click(function(){
  var box=$(this).parent().find('.homepage-line-wrap');
  var posleft=parseInt(box.css('left'));
  if(posleft<-300){
     posleft+=345;
     posleft+='px';
     box.animate({left:posleft},'normal','swing');
  }
});
                                                                                                                                                                                                    
                                                                                                                                                                                                      </script>

